<template>
	<view>
		<view class="bg-Container header-height">
			<view class="header-bg"></view>
			<view class="header-Container header-height">
				<view class="content2">
					<image src="/static/images/common/return-white.png" class="return" @click="gotoNavBack()"></image>
					<view class="" style="margin-left: 46upx;font-size: 36upx;font-weight: bold;color: #FFFFFF;">{{headline}}</view>
					<view @click="toggleMenuListHandler()" class="msgCenter-Container">
						<image class="menu" src="/static/images/common/msg-center-white.png"></image>
						<view v-if="noticeTipCount || $store.state.msgNumber" class="msgCount">
							{{noticeTipCount + $store.state.msgNumber > 99 ? '99+' : noticeTipCount + $store.state.msgNumber}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="showDetailMenu" @click="toggleMenuListHandler()" class="detailMenu-Container search-detailMenu">
			<detailMenu></detailMenu>
		</view>

		<view class="filterBar headerNext">
			<navbar @getAction="tabClick"></navbar>
		</view>

		<view class="row-between" style="width: 100%;flex-wrap: wrap;padding: 0 30upx;" v-if="listType==0 && dataList && dataList.length">
			<home-goods style="width: calc(100% /2 - 11upx);height: calc();" v-for="item in dataList" :item="item" :key="item.goodsCd" />
		</view>
		<view v-else-if="listType && dataList && dataList.length" style="width: 100%;padding: 0 30upx;">
			<goods-across v-for="item in dataList" :item="item" :key="item.goodsCd" />
		</view>
		<g-empty v-else />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jumpType: null,
				dataList: [],
				page: 1,
				noticeTipCount: 0,
				showDetailMenu: false,
				listType: 0,
				sortType: 0,
				headline: ''
			}
		},

		onLoad(options) {
			this.jumpType = options.jumpType - 0;
			console.log("this.jumpType", this.jumpType)
			// 210-10溯源专区220-20认证专区230-30恒量专区，
			this.headline = this.jumpType == 210 ? '溯源专区' : this.jumpType == 220 ? '认证专区' : '恒量专区';
			this.getRequest()
		},
		onShow() {
			this.getMagNumber()
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.page = 1;
			this.dataList = [];
			this.getRequest()
		},
		onReachBottom() {
			this.page += 1;
			this.getRequest()
		},
		methods: {
			toggleMenuListHandler() {
				this.showDetailMenu = !this.showDetailMenu;
			},
			gotoNavBack() {
				uni.navigateBack();
			},
			tabClick(e) {
				console.log("tab----", e)
				if (e.listType >= 0) return this.listType = e.listType;
				if (this.sortType == (e.priceSort || e.sortType)) return;
				this.sortType = e.priceSort || e.sortType
				this.page = 1;
				this.dataList = [];
				this.getRequest()
			},

			getRequest() {
				this.$api.showLoading()
				this.$api.globalUtil.requestAjax({
					url: '/GoodsApi/commodityClassificationListApi',
					method: "POST",
					data: {
						isSearch: false,
						pageNum: this.page, //页码
						pageSize: 10, //显示条数
						sort: this.sortType || '', //综合排序:null 销量排序:1 新品排序:2 价格ASC:3 价格DESC:4
						salesArea: this.jumpType == 210 ? 30 : this.jumpType == 220 ? 20 : 10 // 210-10溯源专区220-20认证专区230-30恒量专区，
					},
					success: (res) => {
						if (!res.data.success) return;
						let arr = res.data.response.results || [];
						if (!arr.length && this.page != 1) return this.$api.msg('没有更多数据!')
						arr.forEach(item => {
							let priceArr = (item.salesPrice / 100).toFixed(2).split('.');
							item.salesPrice = priceArr[0]
							item.zero = priceArr[1] ? '.'+priceArr[1] : ''
							item.marketPrice = (item.marketPrice / 100).toFixed(2)
							item.goodsLabelArr = item.goodsLabel ? item.goodsLabel.split(',') : []
						})
						this.dataList = this.dataList.concat(arr);
					},
					complate: () => (uni.stopPullDownRefresh(),this.$api.hideLoading())
				});
			},
			getMagNumber() {
				this.$api.globalUtil.requestAjax({
					url: '/customerNoticeApi/customerNoticeUnreadCountApi',
					method: 'POST',
					data: {
						cnType: "",
						cnStatus: '0'
					},
					success: (res) => this.noticeTipCount = res.data.response
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	
	/* header */
	.bg-Container {
		width: 100%;
		z-index: 10;

		.header-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #FE5E49;
		}

		.header-Container {
			width: 100%;
			height: 176rpx;

			.content2 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				bottom: 0;
				padding: 0 46rpx 0 0;
				width: 100%;
				height: 88rpx;

				.return {
					width: 44rpx;
					height: 44rpx;
					margin-left: 19rpx;
				}

				.search-input {
					position: relative;
					margin-left: 40rpx;
					width: 540rpx;
					// height: 56rpx;
					border-radius: 28px;
					border: 1rpx solid rgba(245, 109, 10, 1);

					image {
						position: absolute;
						left: 30rpx;
						top: 16rpx;
						width: 26rpx;
						height: 26rpx;
					}

					input {
						box-sizing: border-box;
						padding-left: 74rpx;
						height: 56rpx;
						line-height: 28rpx;
						font-weight: 400;
						font-family: MicrosoftYaHei;
						font-size: 28rpx;
						border-radius: 28rpx;
						background-color: #ffffff;
					}

					.placeholder {
						height: 28rpx;
						line-height: 28rpx;
						font-weight: 400;
						font-family: MicrosoftYaHei;
						font-size: 28rpx;
						color: #999999;
					}
				}

				.btn-icon {
					width: 50rpx;
					height: 51rpx;
					margin-left: 35rpx;
					font-size: 25rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.msgCenter-Container {
		display: flex;
		align-items: center;
		margin-left: 34rpx;
		height: 44rpx;

		.menu {
			width: 40rpx;
			height: 40rpx;
		}

		.msgCount {
			position: absolute;
			bottom: 50rpx;
			right: 32rpx;
			min-width: 26rpx;
			width: auto;
			height: 26rpx;
			line-height: 26rpx;
			text-align: center;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FE5E49;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 1rpx 4rpx 0px rgba(68, 68, 68, 0.2);
			border-radius: 26rpx;
		}
	}
</style>
